<template>
	<view class="beijingse">
		<!-- 头部 -->
		<header-top :messageInfo="{typeFlag:true,message:'商品详情',liner:false}"></header-top>
		<view class="allneirong">
			<view class="lunbbox">
				<u-swiper :list="list1" height="375" imgMode="aspectFit " indicator indicatorMode="line" circular>
				</u-swiper>
			</view>
			<!-- 限时秒杀 -->
			<view class="spxqbjt" v-if="info.type==2">
				<image class="spbjt" src="../../static/image/system/spbjt.png" mode=""></image>
				<view class="flexbetween gudingnr">
					<view class="">
						<view class="fentext">￥{{info.price}}</view>
						<view class="baitext">原价￥{{info.market_price}}</view>
					</view>
					<view class="rtbox">
						<view class="xiaochentext">距秒杀截止时间</view>
						<view class="flexleft">
							<view class="xiaochentext margin_right1">{{timeData.days}}天</view>
							<u-count-down :time="Time" format="HH:mm:ss" autoStart @change="onChange()">
								<view class="time">
									<view class="time__custom">
										<text class="time__custom__item">{{ timeData.hours }}</text>
									</view>
									<text class="time__doc">:</text>
									<view class="time__custom">
										<text class="time__custom__item">{{ timeData.minutes }}</text>
									</view>
									<text class="time__doc">:</text>
									<view class="time__custom">
										<text class="time__custom__item">{{ timeData.seconds }}</text>
									</view>
								</view>
							</u-count-down>
						</view>
					</view>
				</view>
			</view>
			<view class="mainpadding" v-if="info.type==1">
				<view class="ffffff radius mainpadding sdingwei">
					<view class="flexbetween">
						<view class="xiaduiqi">
							<view class="chengsetext margin_right1">￥{{info.price}}</view>
							<view class="huisetext" style="margin-bottom: 6rpx;">￥{{info.market_price}}</view>
						</view>
						<view class="huisetext2">已售{{totalNum}}件</view>
					</view>
					<view class="titletext margin_top1">{{info.name}}</view>
				</view>
			</view>
			<view class="flexcenter shangxq">
				<view class="zuo margin_right4"></view>
				<view class="titletext margin_right4">商品详情</view>
				<view class="you"></view>
			</view>
			<view class="tupianbox">
				<view class="mainpadding">
					<!-- <image style="margin: 0 auto;display: block;" :src="info.image_text" mode=""></image> -->
					<view class="text3">
						<rich-text :nodes="info.content" style="font-size:14px;" space="emsp"></rich-text>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="guddb ffffff">
			<view class="flexbetween ">
				<view class="flexleft">
					<button class="dibubox" open-type="contact" bindcontact="handleContact" session-from="sessionFrom">
						<view class="kefu"></view>
						<view class="huisetext2 margin_top1">客服</view>
					</button>
					<view class="" @click="tocart">
						<view class="gouwuche"></view>
						<view class="huisetext2 margin_top1">购物车</view>
					</view>
				</view>
				<view class="flexleft">
					<view class="jrgwc" @click="joincart">
						<view class="baisetext">加入购物车</view>
					</view>
					<view class="ljgm" @click="tzljgm">
						<view class="baisetext">立即购买</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				timeData: {},
				show: false,
				list1: [],
				id: '', //商品id
				info: {},
				totalNum: '',
				overtime: {
					scond: ''
				},
				Time: '',
			}
		},
		onLoad(options) {
			let _this = this;
			_this.id = options.id;
			_this.getdata(options.id);
		},
		methods: {
			joincart() {
				let _this = this;
				httpRequest.request('api/cart/add', 'POST', {
					goods_id: _this.id,
					num: 1,
				}).then(res => {
					httpRequest.toast(res.msg);
				})
			},
			tocart() {
				uni.switchTab({
					url: '/pages/gouwuche/gouwuche'
				})
			},
			//计算两个时间之间的时间差 多少天时分秒
			intervalTime(startTime, endTime) {
				var timestamp = (Date.parse(new Date())) / 1000; //计算当前时间戳 (毫秒级)
				var date1 = ""; //开始时间
				if (timestamp < startTime) {
					date1 = startTime;
				} else {
					date1 = timestamp; //开始时间
				}
				var date2 = endTime; //结束时间
				// var date3 = date2.getTime() - date1.getTime(); //时间差的毫秒数
				var date3 = (date2 - date1) * 1000; //时间差的毫秒数
				//计算出相差天数
				var days = Math.floor(date3 / (24 * 3600 * 1000));
				//计算出小时数

				var leave1 = date3 % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
				var hours = Math.floor(leave1 / (3600 * 1000));
				//计算相差分钟数
				var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
				var minutes = Math.floor(leave2 / (60 * 1000));

				//计算相差秒数

				var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
				var seconds = Math.round(leave3 / 1000);
				// console.log(days + "天 " + hours + "小时 ")
				// return   days + "天 " + hours + "小时 " + minutes + " 分钟" + minutes + " 秒"
				// return   days + "天 " + leave1 + "剩余毫秒 "
				return {
					days: days,
					hours: hours,
					minutes: minutes,
					seconds: seconds,
				}
			},

			getovertime() {
				let _this = this;
				httpRequest.request('api/index/getConfigInfo', 'POST', {}).then(res => {
					if (res.code == 1) {
						let time = Date.parse(new Date()); //当前时间戳
						_this.Time = res.data.mstime * 1000 - time;
						_this.timeData = _this.intervalTime(time / 1000, res.data.mstime);
						console.log(_this.overtime);
					}
				})
			},
			getdata(id) {
				let _this = this;
				httpRequest.request('api/goods/goodsdetail', 'POST', {
					id: id,
				}).then(res => {
					if (res.code == 1) {
						console.log(res, '商品数据');
						_this.list1 = res.data.images_text;
						if (res.data.type == 2) {
							_this.getovertime();
						}
						res.data.content = res.data.content.replace(/\<img/gi,
							'<img style="width:100%;height:auto" ');
						_this.info = res.data;

						_this.totalNum = res.data.salesnum + res.data.basicnum
					}
				})
			},
			// 跳转立即购买
			tzljgm() {
				let data = {
					goodsinfo: [],
					type: "detail" //car购物车，detail详情
				}
				data.goodsinfo.push({
					goodsId: this.id,
					specType: 0,
					num: 1
				})
				uni.navigateTo({
					url: '/pages/homepage/querendd?msg=' + encodeURIComponent(JSON.stringify(data))
				})
			},
			onChange(e) {
				this.timeData = e
			},
			gotoBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			// // 弹框接口
			// tankuang() {
			// 	this.show = true

			// },
			close() {
				this.show = false
			},
		}
	}
</script>
<style lang="scss" scoped>
	.xiaduiqi {
		display: flex;
		align-items: flex-end;
	}

	rich-text {

		width: 100%;
		margin: 16rpx auto;
		position: relative;
		display: block;

	}

	rich-text .span_class {

		width: 100%;
		font-size: 14px;
		line-height: 20px;

	}

	rich-text .p_class {

		width: 100%;
		font-size: 14px;
		line-height: 20px;

	}

	rich-text .img_class {

		width: 100%;
		height: auto;

	}


	button {
		margin: 0;
		padding-left: 0;
		padding-right: 0;
		background-color: none;
		background: none;
		line-height: 25rpx;
		color: none;
		border-radius: 0;
	}

	button::after {
		border: none !important;
	}

	/deep/.time__doc {
		color: #FD463E !important;
	}

	/deep/.time__custom {
		background-color: #FD463E !important;
		border-radius: 50% !important;
	}

	.time {
		@include flex;
		align-items: center;

		&__custom {
			margin-top: 4px;
			width: 22px;
			height: 22px;
			background-color: $u-primary;
			border-radius: 4px;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			justify-content: center;
			align-items: center;

			&__item {
				color: #FFFFFF;
				font-size: 12px;
				text-align: center;
			}
		}

		&__doc {
			color: $u-primary;
			padding: 0px 4px;
		}

		&__item {
			color: #606266;
			font-size: 15px;
			margin-right: 4px;
		}
	}
</style>
<style lang="scss" scoped>
	.weixin {
		width: 70.8rpx;
		height: 68.8rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/weixin.png');
	}

	.allneirong {
		padding-bottom: 169rpx;
	}

	.xiaochentext {
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FD463E;
	}

	.gudingnr {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		padding: 30rpx 30rpx 30rpx 197rpx;
		box-sizing: border-box;
	}

	.spbjt {
		position: relative;
		width: 100%;
		height: 157rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.baitext {
		text-decoration: line-through;
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #EDEDED;
	}

	.fentext {
		font-size: 44rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
	}

	.spxqbjt {
		position: relative;
	}

	.fanhui {
		width: 16rpx;
		height: 18rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/returnhei.png');
	}

	img {
		margin-top: 30rpx;
		width: 100%;
	}

	.input {
		text-align: center;
		width: 60rpx;
		height: 40rpx;
	}

	.xiaobtn {
		width: 372rpx;
		margin: 30rpx auto 0;
		height: 82rpx;
		display: flex;
		border-radius: 40rpx;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		background-color: #ffa14b;
	}

	.xiaobtn2 {
		width: 372rpx;
		margin: 30rpx auto 0;
		height: 82rpx;
		display: flex;
		border-radius: 40rpx;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		background-color: #ff6b00;
	}

	.xhtext {
		font-size: 31rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #EF8933;
	}

	.jianhao {
		width: 24rpx;
		// position: absolute;
		top: 20rpx;
		left: 14rpx;
		height: 4rpx;
		background-color: #999999;
	}

	.jiajian {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		border-radius: 20rpx;
		background-size: 100% 100%;
	}

	.tkhstext {
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FF8110;
	}

	.spslt {
		width: 134rpx;
		height: 134rpx;
		border-radius: 8rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 8rpx;
		}
	}

	.neijianju {
		padding: 0 130rpx;
	}

	.tkbox {
		padding: 50rpx 50rpx 0;
	}


	.eshiliu {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.erwm {
		width: 243rpx;
		height: 243rpx;
		margin: 30rpx auto 0;

		image {
			width: 100%;
			height: 100%;
		}
	}

	// .tanktb {
	// 	width: 100%;
	// 	height: 237rpx;
	// 	background-size: 100% 100%;
	// 	background-image: url('../../static/image/system/tktb.png');
	// }

	.guddb {
		position: fixed;
		width: 100%;
		bottom: 0;
		left: 0;
		padding: 30rpx 30rpx 60rpx;
		box-sizing: border-box;
	}

	.ljgm {
		width: 208rpx;
		height: 76rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/ljgm.png');
	}

	.jrgwc {
		width: 208rpx;
		height: 76rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/jrgwc.png');
	}

	.baisetext {
		font-size: 26rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
	}

	.dibubox {
		margin-right: 60rpx;
	}

	.gouwuche {
		margin: auto;
		width: 45rpx;
		height: 45rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/heigwc.png');
	}

	.kefu {
		margin: auto;
		width: 39.38rpx;
		height: 38.56rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/kefu.png');
	}

	.shilitu {
		width: 100%;
		height: 800rpx;
		border-radius: 36rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 36rpx;
		}
	}

	.zuo {
		width: 20rpx;
		height: 17rpx;
		background-image: url('../../static/image/system/zuo.png');
		background-size: 100% 100%;
	}

	.you {
		width: 20rpx;
		height: 17rpx;
		background-image: url('../../static/image/system/you.png');
		background-size: 100% 100%;
	}

	.huisetext2 {
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.huisetext {
		text-decoration: line-through;
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.chengsetext {
		font-size: 48rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FD463E;
	}

	.header1 {
		width: 100%;
		padding: 50rpx 30rpx 30rpx;
		box-sizing: border-box;
	}

	.toububox1 {
		background-size: cover;
		display: flex;
		align-items: center;
		position: fixed;
		z-index: 10;
		left: 0;
		top: 0;
		padding: 100rpx 30rpx 30rpx;
		width: 100%;
		box-sizing: border-box;
	}

	.heisetext {
		font-size: 36rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}
</style>
